<template>
    <view class="content">
        <!-- 头部 -->
        <u-navbar :fixed="true" :shadow="navbar.shadow" :bgColor="navbar.bgColor"
            leftIconSize="0" :title="navbar.title" :autoBack="false" >
            <view class="u-flex" slot="right">
                <u-icon name="search" size="26" :color="navbar.bgColor=='transparent'?'#fff':'#151C24'" @tap="developing"></u-icon>
                <u-icon class="u-m-l-20" name="scan" size="26" :color="navbar.bgColor=='transparent'?'#fff':'#151C24'" 
                    @tap="developing">
                </u-icon>
            </view>
        </u-navbar>

        <!-- swiper -->
        <u-swiper :list="swipers" interval="6000" height="350rpx" radius="0" keyName="attachUrl" :showTitle="false" circular indicator
            @change="e => current = e.current">
            <!-- 自定义指示器 -->
            <view slot="indicator" class="indicator">
                <view class="indicator__dot"
                    v-for="(item, index) in swipers"
                    :key="index"
                    :class="[index === current && 'indicator__dot--active']" >
                </view>
            </view>
        </u-swiper>

        <!-- 版心 -->
        <view class="uni-area">
            <!-- 滚动通知 -->
            <u-notice-bar class="uni-home-notice" 
                direction="column" color="#606464" :speed="300" :duration="3000" :text="notices" @click="developing">
            </u-notice-bar>

            <!-- 横向滚动列表 -->
            <u-scroll-list class="u-m-t-40 scroll-list u-p-t-0">
                <view class="tem" v-for="(tem, ind) in scrolls" :key="ind">
                    <view v-for="(item,index) in tem" :key="index" @tap.stop="menuSkip(item.url)"
                        class="u-flex u-flex-col u-row-center item" style="min-height:138rpx">
                        <u--image width="108rpx" height="108rpx" shape="circle" :showLoading="true" :src="item.thumb"></u--image>
                        <text class="u-font-26 u-text-center" style="min-width:130rpx">{{item.title}}</text>
                    </view>
                </view>
            </u-scroll-list>

            <!-- 预警情况 -->
            <view class="u-m-t-44 warn">
                <text class="u-font-36 font-bold">预警情况</text>
                <view class="u-m-t-22 img-box">
                    <u--image width="102%" height="206rpx" style="margin-left:-2%" mode="scaleToFill"
                        :showLoading="true" src="/static/home/bg1.png" >
                    </u--image>
                    <view class="u-flex img-content">
                        <view class="uni-inverse-color u-text-center left">
                            <text class="u-font-28">项目预警情况</text>
                            <u-button class="u-m-t-14 detail" type="success" shape="circle" @tap="menuSkip('/pages/other-bag/warn')">
                                <text class="u-m-t-4 u-font-22">查看详情</text>
                            </u-button>
                        </view>
                        <view class="uni-inverse-color u-p-l-44 right">
                            <text class="u-font-28">未开立工资专户</text>
                            <view class="u-m-t-14 u-font-46 uni-inverse-color u-flex u-col-top">
                                <text>{{warnsTotal}}</text>
                                <text class="u-font-22">个</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="u-flex u-flex-wrap">
                    <view v-for="(item,index) in warns" :key="index"
                        class="u-m-b-26 u-font-22 u-p-l-22 u-p-t-30 item"
                        :style="{background:'url('+item.bg+')'}">
                        <text>{{item.title}}</text>
                        <view class="u-m-t-14 u-flex u-col-top u-font-22">
                            <text class="u-font-46">{{item.value}}</text>个
                        </view>
                    </view>
                </view>
            </view>

            <!-- 项目统计 -->
            <view class="project u-m-t-20">
                <view class="u-flex u-row-between">
                    <text class="u-font-36 font-bold">项目统计</text>
                    <view class="u-flex" @tap.stop="projectScreen.show=true">
                        <text class="u-m-r-16 u-font-26 uni-dec-color">{{projectScreen.dictLabel}}</text>
                        <u-icon name="arrow-down" size="13" color="#5D6672"></u-icon>
                    </view>
                </view>
                <u-scroll-list :indicator="false"
                    class="u-m-t-22 uni-shadow u-p-t-40 u-p-l-0 u-p-r-0 project-scroll">
                    <view v-for="(item, index) in project" :key="index"
                        class="u-p-l-46 u-p-r-34 item">
                        <view class="u-font-28 uni-gery-color" style="white-space:nowrap">{{item.title}}</view>
                        <view class="u-m-t-14 u-flex u-col-top u-font-22">
                            <text class="u-font-46">{{item.value}}</text>个
                        </view>
                    </view>
                </u-scroll-list>
            </view>

            <!-- 专户概况 -->
            <view class="wage u-m-t-44">
                <text class="u-font-36 font-bold">专户概况</text>
                <view class="u-m-t-22 img-box">
                    <u--image width="102%" height="206rpx" style="margin-left:-2%" mode="scaleToFill"
                        :showLoading="true" src="/static/home/bg8.png">
                    </u--image>
                    <view class="u-flex img-content">
                        <view class="uni-inverse-color u-text-center left">
                            <text class="u-font-28">专户概况</text>
                            <u-button class="u-m-t-14 detail" type="success" shape="circle" @tap="menuSkip('/pages/fohf-bag/wage')">
                                <text class="u-m-t-4 u-font-22">查看详情</text>
                            </u-button>
                        </view>
                        <view class="uni-inverse-color u-p-l-44 right">
                            <text class="u-font-28">专户总数</text>
                            <view class="u-m-t-14 u-font-46 uni-inverse-color u-flex u-col-top">
                                <text>{{wagesTotal}}</text>
                                <text class="u-font-22">个</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="u-m-t-30 u-flex u-flex-wrap u-row-between">
                    <view v-for="(item,index) in wages" :key="index"
                        class="u-m-b-26 u-font-22 u-p-l-22 u-p-t-30 item"
                        :style="{background:'url('+item.bg+')'}">
                        <text>{{item.title}}({{item.unit}})</text>
                        <view class="u-m-t-14 u-flex u-col-top u-font-22">
                            <text class="u-font-46">{{item.value}}</text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 数据统计 -->
            <view class="data">
                <text class="u-font-36 font-bold">数据统计</text>
                <view class="u-m-t-30 uni-shadow u-p-l-10 u-p-t-10 echarts">
                    <qiun-title-bar title="项目分布" />
                    <text class="u-font-26 uni-gery-color unit">单位：个</text>
                    <view style="height:520rpx">
                        <qiun-data-charts type="pie" 
                            :tooltipShow="true" tooltipFormat="tooltipDemo1"
                            :opts="projectData.series[0].data.length>6?projectData.opts:{}" :chartData="projectData" />
                    </view>
                </view>
                <view class="u-m-t-30 uni-shadow u-p-l-10 u-p-t-10 echarts">
                    <qiun-title-bar title="开户情况"/>
                    <text class="u-font-26 uni-gery-color unit">单位：个</text>
                    <view style="height:520rpx">
                        <qiun-data-charts type="column" 
                            :tooltipShow="true" tooltipFormat="pileTooltip"
                            :opts="{dataLabel:false,extra:{column:{type:'stack'}}}" :chartData="openData"/>
                    </view>
                </view>

                <view class="u-m-t-30 uni-shadow u-p-l-10 u-p-t-10 echarts">
                    <qiun-title-bar title="工人分布"/>
                    <text class="u-font-26 uni-gery-color unit">单位：人</text>
                    <view style="height:500rpx">
                        <qiun-data-charts type="line" 
                            :ontouch="true" :canvas2d="true"
                            :opts="workerData.categories.length>5?workerData.opts:{}"
                            :chartData="workerData" />
                    </view>
                </view>
            </view>

            <!-- 间隙 -->
            <u-gap height="30rpx" bgColor="#FBFCFC"></u-gap>
        </view>

        <!-- 项目统计筛选 -->
        <u-picker :show="projectScreen.show" :columns="projectScreen.data" keyName="dictLabel" :closeOnClickOverlay="true"
            @cancel="projectScreen.show=false" @close="projectScreen.show=false" @confirm="projectScreenSelect">
        </u-picker>
        <!-- tabbar 盒子阴影 -->
        <view class="tabbar-shadow"></view>
        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
export default {
    data() {
        return {
            // navbar
            navbar:{
                bgColor: 'transparent',
                shadow: false,
                title: '',
            },
            // 用户信息
            userInfo: uni.getStorageSync("userInfo"), 
            // swiper
            current: 0,
            swipers:[
                {
                    attachUrl: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                    title: '身无彩凤双飞翼，心有灵犀一点通'
                },
                {
                    attachUrl: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
                    title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
                }
            ],
            // 通知
            notices:[
                '兵团农民工工资支付监控预警平台3月1日上线',
                '兵团农民工工资支付监控预警平台3月1日上线'
            ],
            // 横向滚动列表
            scrolls:[
                [
                    {
                        thumb: "/static/home/icon1.png",
                        title: '单位',
                        url: '/pages/enterprise-bag/manage'
                    }, 
                    {
                        thumb: "/static/home/icon6.png",
                        title: '考勤',
                        url: '/pages/attendance-bag/manage',
                    }
                ],
                [
                    {
                        thumb: "/static/home/icon2.png",
                        title: '项目',
                        url: '/pages/project-bag/manage'
                    }, 
                    {
                        thumb: "/static/home/icon7.png",
                        title: '工资',
                        url: '/pages/wage-bag/manage',
                    }
                ],
                [
                    {
                        thumb: "/static/home/icon4.png",
                        title: '人员',
                        url: '/pages/member-bag/manage'
                    }, 
                    {
                        thumb: "/static/home/icon9.png",
                        title: '信用',
                        url:'/pages/other-bag/credit-manage'
                    }, 
                ],
                [
                    {
                        thumb: "/static/home/icon5.png",
                        title: '专户',
                        url: '/pages/fohf-bag/manage'
                    },
                    {
                        thumb: "/static/home/icon11.png",
                        title: '培训',
                        url:'/pages/other-bag/train-manage'
                    },
                ],
                [
                    {
                        thumb: "/static/home/icon10.png",
                        title: '统计分析',
                        url:'/pages/other-bag/total-analyse'
                    }
                ],
                // [
                //     {
                //         thumb: "/static/home/icon12.png",
                //         title: '预警',
                //         url:'/pages/other-bag/warn'
                //     }
                //     {
                //         thumb: "/static/home/icon13.png",
                //         title: '督办',
                //         url:'/pages/other-bag/supervise'
                //     }
                // ],
                // [
                    // {
                    //     thumb: "/static/home/icon3.png",
                    //     title: '班组',
                    //     url: '/pages/team-bag/manage'
                    // }, 
                    // {
                    //     thumb: "/static/home/icon8.png",
                    //     title: '现场',
                    //     url:'/pages/scene-bag/manage'
                    // }, 
                // ]
            ],
            // 预警
            warnsTotal: 0, // 为开立工资专户
            warns:[
                { title:'未按时足额存入', value: 0, bg:'/static/home/bg2.png' },
                { title:'未按时上传工资表', value: 0, bg:'/static/home/bg3.png' },
                { title:'工资专户余额不足', value: 0, bg:'/static/home/bg4.png' },
                { title:'未按时发放工资', value: 0, bg:'/static/home/bg5.png' },
                { title:'本月预警', value: 0, bg:'/static/home/bg6.png' },
                { title:'累计预警数', value: 0, bg:'/static/home/bg7.png' },
            ],
            // 项目统计
            projectScreen:{
                show: false,
                dictLabel: '全部',
                dictValue: '',
                data: [
                    [
                        { dictLabel: '全部', dictValue: ''} 
                    ]
                ],
            },
            project:[
                { fied:'project', title:'项目总数', value: 0 },
                { fied:'atdStaffs', title:'今日考勤总人数', value: 0 },
                { fied:'bp', title:'在建项目数', value: 0 },
                { fied:'staffs', title:'实名制总人数', value: 0 },
            ],
            // 工资专户
            wagesTotal: 0,
            wages:[
                { fied:'project', title:'本月工资发放项目数', value: 0, bg:'/static/home/bg9.png', unit:'个' },
                { fied:'balance', title:'专户总余额', value: 0, bg:'/static/home/bg10.png', unit:'万元' },
                { fied:'value', title:'本月工资发放金额', value: 0, bg:'/static/home/bg11.png', unit:'万元' },
                { fied:'staffs', title:'本月工资发放人数', value: 0, bg:'/static/home/bg12.png', unit:'人' },
            ],
            // 项目分布
            projectData:{
                series: [
                    {
                        data: [
                            // { name: "住建", value: 50 }
                        ],
                        format: 'yAxisDemo1', // 数据格式化
                    }
                ],
                opts:{
                    fontSize: 12,
                    legend:{
                        lineHeight: 15,
                        padding: 2,
                        margin: 2
                    }
                }
            },
            // 开户情况
            openData:{
                categories: [ "已开户","已撤销","未开户"],
                series: [
                    {
                        name: "中国农业银行",
                        data: []
                    },
                    {
                        name: "中国建设银行",
                        data: []
                    },
                    {
                        name: "中国交通银行",
                        data: []
                    },
                    {
                        name: "邮储银行",
                        data: []
                    },
                    {
                        name: "其它",
                        data: []
                    }
                ],
            },
            // 工人分布
            workerData:{
                categories:[],
                series:[
                    // {
                    //     name: "实名制进场人数",
                    //     data: []
                    // },
                    // {
                    //     name: "考勤总人数",
                    //     data: []
                    // },
                ],
                opts:{ 
                    yAxis: {
                        showTitle:true,
                        data: [
                            {
                                position: 'left',
                                title: '实名制进场人数',
                                titleOffsetX: 15,
                                titleOffsetY: -8,
                            }, 
                            {
                                position: 'right',
                                title: '考勤总人数',
                                titleOffsetX: -15,
                                titleOffsetY: -8,
                            }
                        ]
                    },
                    enableScroll: true, 
                    xAxis:{
                        itemCount: 3,
                        rotateLabel: false,
                        scrollShow:true,
                        disableGrid:true
                    },
                }
            }
        }
    },


    onReady(){},

    // 页面滚动
    onPageScroll(e){
        if( e.scrollTop > 120 ){
            this.navbar.bgColor = '#fff'
            this.navbar.shadow = true
            this.navbar.title = '安薪乐'
        }else{
            this.navbar.bgColor = 'transparent'
            this.navbar.shadow = false
            this.navbar.title = ''
        }
    },
    
    onLoad() {
        // console.log('用户信息',this.userInfo)
        // 焦点图
        this.getBanner()
        // 预警情况
        this.getWarningTotal()
        // 项目统计
        this.getProjectScreenData()
        this.getProjectTotal()
        // 工资专户
        this.getGongzizhuanhuData()
        // 项目分布
        this.getProjectDis()
        // 开户情况
        this.getKaihuData()
        // 工人分布
        this.getWorkerData()
    },

    methods: {
        // 开发中
        developing(){
            uni.showToast({ title: '开发中,敬请期待', icon: 'none', duration: 3000 }) 
            // this.$tools.uToast(this, 'default', '', '开发中,敬请期待', 3000)
        },
        // 菜单跳转
        menuSkip(url){
            uni.navigateTo({ url: url })
        },




        // 项目统计筛选
        projectScreenSelect(e){
            this.projectScreen.dictLabel = e.value[0].dictLabel
            this.projectScreen.dictValue = e.value[0].dictValue
            this.projectScreen.show = false
            this.getProjectTotal()
        },


        // 获取焦点图
        getBanner(){
            uni.showLoading({ title:'焦点图获取中' })
            const parameter = {
                ywlx: 'focus_map',
                bid: 'focus_map_20210000001',
                attachType:	'focus_map'
            }
            this.$request(this,this.$apis.banner, parameter).then(res=>{
                this.swipers = res.rows
            }).then()
        },

        // 预警情况(预警页面接口)
        getWarningTotal(){
            this.$request(this, this.$apis.warning,{}).then(res => {
                this.warns[4].value = res.mvalue
                this.warns[5].value = res.value
                this.$request(this, this.$apis.warningEcharts,{}).then(res1 => {
                    // console.log('预警',res,res1)
                    this.warnsTotal = res1[0].value
                    this.warns[0].value = res1[1].value
                    this.warns[1].value = res1[2].value
                    this.warns[2].value = res1[3].value
                    this.warns[3].value = res1[4].value
                }).then()
            }).then()
        },

        // 项目统计筛选数据
        getProjectScreenData(){
            this.$request(this,this.$apis.dictionariesXmtype,{}).then(res=>{
                res.map((v,i)=>{
                    this.projectScreen.data[0].push(v)
                })
                // console.log('项目统计筛选', this.projectScreen.data)
            }).then()
        },
        // 项目统计
        getProjectTotal(){
            const parameter = { xmtype: this.projectScreen.dictValue }
            this.$request(this,this.$apis.projectTotal, parameter).then(res=>{
                // console.log('项目统计',res)
                this.project.map((v,i)=>{
                    v.value = res[v.fied]
                })
            }).then()
        },

        // 专户概况
        getGongzizhuanhuData(){
            this.$request(this,this.$apis.gongzizhuanhu,{}).then(res=>{
                // console.log('专户概况',res)
                this.wagesTotal = res.account
                this.wages.map((v,i)=>{
                    v.value = res[v.fied]
                })
            }).then()
        },


        // 项目分布
        getProjectDis(){
            let api 
            if( this.userInfo.districtId == this.$config.districtId ){ // 兵团
                api = this.$apis.projectChart
            }else{ // 师级
                api = this.$apis.projectChartDis
            }
            this.$request(this,api,{}).then(res=>{
                // console.log('项目分布',res)
                res.map((v,i)=>{
                    this.projectData.series[0].data.push({
                        name: v.name+':'+v.value,
                        value: v.value,
                        label: v.name,
                    })
                })
            }).then()
        },
        // 开户情况
        getKaihuData(){
            this.$request(this,this.$apis.account,{}).then(res=>{
                // console.log('开户情况',res)
                this.openData.categories = []
                this.openData.series = []
                // 提取所有银行并去重
                const arr = []
                res.map((v,i)=>{
                    this.openData.categories.push(v.name)
                    try {
                        v.data.map((a,b)=>{
                            arr.push(a.bankType)
                        })
                    } catch (error) {}
                })
                const arr1 = Array.from(new Set(arr))
                // 赋值
                const series = []
                arr1.map((v,i)=>{
                    series.push({ name: v, data: [] })
                })
                series.map((v, i) => {
                    res.map((a, b) => {
                        if( a.data ){
                            a.data.map((c, d) => {
                                if ( v.name == c.bankType ) {
                                    v.data[b] = c.account
                                }
                            })
                        }else{
                            v.data[b] = 0
                        }
                    })
                })
                this.openData.series = series
                // console.log('开户情况',this.openData)
            }).then()
        },
        // 工人分布
        getWorkerData(){
            let api 
            if( this.userInfo.districtId == this.$config.districtId ){ // 兵团
                api = this.$apis.workerFenbu
            }else{ // 师级
                api = this.$apis.workerFenbuDis
            }
            this.$request(this,api,{}).then(res=>{
                // console.log('工人分布',res)
                this.workerData.categories = []
                this.workerData.series = [
                    { index: 0, name: "今日考勤人数", data: [] },
                    { index: 1, name: "实名制总人数", data: [] }
                ]
                res.map((v,i)=>{
                    this.workerData.categories.push(v.districtName?v.districtName:v.projectType) // 师级返回的是projectType字段
                    this.workerData.series[0].data.push(v.atdStaffs) // 今日考勤人数
                    this.workerData.series[1].data.push(v.staffs) // 实名制总人数
                })
            }).then()
        }
    }
}
</script>

<style scoped lang="scss">
    .content{
        // 自定义指示器
        .indicator {
            @include flex(row);
            justify-content: center;
            &__dot {
                height: 16rpx;
                width: 16rpx;
                border-radius: 100px;
                background-color: rgba(255, 255, 255, 0.35);
                margin: 0 5px 34rpx;
                transition: background-color 0.3s;
                &--active {
                    background-color: #ffffff;
                }
            }
        }
        // 滚动通知
        .u-notice-bar{
            height: 110rpx;
            line-height: 110rpx;
            background-color: #fff !important;
            border-radius: 16rpx;
            margin-top: -14rpx;
            position: relative;
            z-index: 1000;
            border: 1rpx solid #f8f8fa;
            box-shadow: 0px 3px 5px rgba(230, 230, 230, 0.6);
        }

        // 横向滚动
        .scroll-list{
            .tem{
                margin: 0 20rpx;
                &:nth-child(1){
                    margin-left: 16rpx;
                }
                &:last-child{
                    padding-right: 16rpx;
                }
                .item:nth-child(1){
                    margin-bottom: 30rpx;
                }
            }
        }

        // 预警情况
        .warn{
            .item{
                width: 216rpx;
                height: 194rpx;
                border-radius: 16rpx;
	            background-repeat: no-repeat !important;
                background-size: cover !important;
                &:nth-child(3n-1){
                    margin: 0 20rpx;
                }
            }
        }
        // 项目统计
        .project{
            .project-scroll{
                height: 180rpx;
                .item{
                    border-right: 1rpx solid rgba(230, 230, 230, 0.9);
                    &:last-child{
                        border: none;
                    }
                }
            }
        }
        // 工资专户
        .wage{
            .item{
                width: 334rpx;
                height: 150rpx;
                border-radius: 16rpx;
                background-repeat: no-repeat !important;
                background-size: cover !important;
            }
        }
        // 数据统计
        .echarts{
            background: #FEFFFE;
            position: relative;
            .unit{
                position: absolute;
                top: 36rpx;
                right: 30rpx;
            }
        }
        // 预警情况&专户工资的背景图片部分
        .img-box{
            position: relative;
            .img-content{
                padding-bottom: 36rpx;
                width: 100%;
                height: 206rpx;
                position: absolute;
                top: 0;
                .left{
                    width: 266rpx;
                    .detail{
                        width: 150rpx;
                        height: 44rpx;
                        background: transparent;
                        border: 1rpx solid $uni-text-color-inverse;
                    }
                }
                .right{
                    border-left: 1rpx solid $uni-text-color-inverse;
                }
            }
        }


        // tabbar阴影
        .tabbar-shadow{
            width: 100%;
            position: fixed;
            left: 0;
            z-index: 997; 
            box-shadow: 0px -5px 10px -10px rgba(0, 0, 0, 0.5);
            height: 44px;
            /* #ifdef APP-PLUS */
            bottom: -44px;
            /* #endif */
            /* #ifdef H5 */
            bottom: 11px;
            /* #endif */
        }
    }
</style>